Y7 - SU1.7 - Refining a Website

⏱️ Do It Now

Create a OneNote Page and copy this into the title:

Lesson 7 - Summer 1 - Refining The Website

Copy this into a OneNote Page and complete it

📝 Do It Now

Answer each of the following:

(1) What does this CSS do?


p{

color: red;

}

(2) This is some CSS code applied to a navigation menu. What does each of these properties control?


.nav{

background-color:#00ff00;

padding:5px;

}

(3) Explain what this tag is used for?
🔺What does href do?
🔺Why do we use the letter a?
<a href="seagull-facts.html"> Seagull Facts </a>

Extension Question: What is the most important thing to consider when building a website, and why is it the most important?

🎯 Learning Objectives

LO1: We will be able to edit and format HTML Webpages
LO2: We will be able to link multiple pages together, with a consistent navigation menu
LO3: We will be able to test the functionality of a website

Success Criteria

You must produce a website where:

There are at least 4 pages
All pages are linked to one another
There are images on each page
There is good balance of images and text on each page
CSS has been used in order to enhance the site

Example

🎥 Create Multiple Pages

Work with the video below to set up multiple pages on your site.

You don't need to complete all of them immediately but you do need them for the navigation menu to work.

VSCODE - MAKE MULTIPLE PAGES

Click for page template code

<!DOCTYPE html>

<html>
    <head>
        <title>My Website</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
 
<!-- Content Goes here! -->
    
    </body>
</html>

Go to next slide ➡️➡️

🎥 Publishing and Viewing Your Site

Work with the video below to publish your website so you can view it live.

This will also allow you to test if any links work.

VSCODE - PUBLISHING AND VIEWING YOUR WEBSITE

Go to next slide ➡️➡️

🎥 (1) Create A Navigation Menu

Work with the video below to create a navigation menu on your site.

For this to work you must have created all of the pages first.

VSCODE - MAKE A NAVIGATION MENU

🎥 (2) Style Your Navigation Menu

Work with the video below to style the navigation menu on your site.

VSCODE - STYLING A NAVIGATION MENU

Go to next slide ➡️➡️

🎥 Adding Images From Google To A Site

Watch This video to see how an image from Google can be added to your webpage

Go to next slide ➡️➡️

🎥 Creating a Website Banner With PowerPoint

Watch This video to learn how to create a website banner

Go to next slide ➡️➡️

CSS

Some Useful Examples of CSS

The code below: 
🔻Sets the text colour of heading 1 tags to green
🔻Sets the font to Gill Sans, however if this font isn't on the computer viewing the webpage it will set it to Gill Sans MT.

h1{
    color:green;
    font-family:'Gill Sans', 'Gill Sans MT';
}

This can be done for h2 and p tags



The code below: 
🔻Sets the background colour of the page to the hex value #00ff00

body{
    background-color:#00ff00;
}



The code below: 
🔻Uses the border-radius property to round the corners of the image.
🔻Uses the border property to add a 5 pixel thick, solid red border to all images

img{
border-radius:10px;
border: 5px solid #ff0000;
}

👩‍🎨 Image Border and Rounded Edges

You can add borders and rounded edges to images.

Use this code for an image tag


<img src="images/button-moon.png"
style=
"
width:200px;
border:8px solid red;
border-radius:100px;
"
>

The style attribute is basically CSS but you can add it inside the image tag instead of on the stylesheet.

Go to next slide ➡️➡️

👩‍🎨 Creating A Flex Box

Any element placed within a flex box will appear next to, not below the previous element

Button moon was a popular children's television series during the mid 1980s. It featured a whole host of characters on the moon!

The code for this


<div style="
display:flex;
width:66%;
border:5px solid blue;
padding:5px;
background-color:grey;
border-radius:20px;
">

<!-- Put your content here -->

</div>